<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EHT组件测试DEMO</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js"></script>
    <script src="lib/eht.js"></script>
    <style>
        body {
            padding: 20px;
        }
        .demo-container {
            margin-bottom: 20px;
        }
        .component-section {
            margin-bottom: 30px;
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 5px;
        }
        .component-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">EHT组件测试DEMO</div>
        <div class="layui-card-body">
            <div class="component-section">
                <div class="component-title">按钮组件测试</div>
                <button class="layui-btn" onclick="createDemoButton()">创建示例按钮</button>
                <button class="layui-btn" onclick="updateDemoButton()">更新示例按钮</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoButton()">删除示例按钮</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">DIV组件测试</div>
                <button class="layui-btn" onclick="createDemoDiv()">创建示例DIV</button>
                <button class="layui-btn" onclick="createButtonInDiv()">在DIV中创建按钮</button>
                <button class="layui-btn" onclick="toggleDivVisibility()">切换DIV可见性</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoDiv()">删除示例DIV</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">卡片面板测试</div>
                <button class="layui-btn" onclick="createDemoTDiv()">创建卡片面板</button>
                <button class="layui-btn" onclick="createButtonInTDiv()">在卡片面板中创建按钮</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoTDiv()">删除卡片面板</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">表格组件测试</div>
                <button class="layui-btn" onclick="createDemoTable()">创建示例表格</button>
                <button class="layui-btn" onclick="addTableRow()">添加表格行</button>
                <button class="layui-btn" onclick="updateTableCell()">更新表格单元格</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoTable()">删除示例表格</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">图片组件测试</div>
                <button class="layui-btn" onclick="createDemoPic()">创建示例图片</button>
                <button class="layui-btn" onclick="updateDemoPic()">更新图片</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoPic()">删除示例图片</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">文本组件测试</div>
                <button class="layui-btn" onclick="createDemoText()">创建示例文本</button>
                <button class="layui-btn" onclick="updateDemoText()">更新文本内容</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoText()">删除示例文本</button>
            </div>
            
            <div class="component-section">
                <div class="component-title">轮播图片组件测试</div>
                <button class="layui-btn" onclick="createDemoPicplay()">创建轮播图片</button>
                <button class="layui-btn" onclick="updateDemoPicplay()">更新轮播图片</button>
                <button class="layui-btn layui-btn-danger" onclick="deleteDemoPicplay()">删除轮播图片</button>
            </div>

    <script>
        function eht_callback(typa,id, stat, title, tag, x, y, key,r,c) {
            if(stat>0){
                console.log('默认回调:', {id, stat, title, tag, x, y, key,r,c});
                layui.layer.msg(`组件ID:${id} 事件类型:${stat} 标签:${tag}`);
            }
        }
        //typa=组件类型字符串,id=组件id,stat=事件类型,title=组件标题,tag=组件标签,x=鼠标x坐标,y=鼠标y坐标,key=键盘按键值
        //stat=1鼠标左键点击,stat=2鼠标右键点击,stat=3键盘按键按下,stat=4键盘按键松开,stat=5鼠标进入,stat=6鼠标移出,stat=7鼠标双击
        function custom_callback(typa,id, stat, title, tag, x, y, key,r,c) {
            if(stat>0){
                console.log('自定义回调:', {id, stat, title, tag, x, y, key,r,c});
                layui.layer.msg(`自定义回调:组件ID:${id} 事件类型:${stat} 标签:${tag}`);
            }
            return true; // 阻止默认回调
        }
        
        // 按钮组件变量
        let buttonId = null;
         
        function createDemoButton() {
            if (buttonId) {
                layui.layer.msg('请先删除当前按钮');
                return;
            }
            buttonId = add_button(100, 100, 120, 40, '示例按钮', false, 'demo', '', custom_callback);
            layui.layer.msg('按钮创建成功');
        }
        
        function updateDemoButton() {
            if (!buttonId) {
                layui.layer.msg('请先创建按钮');
                return;
            }
            upd_button(buttonId, 150, 150, 150, 50, '更新后的按钮', false, 'updated');
            layui.layer.msg('按钮更新成功');
        }

        function deleteDemoButton() {
            if (!buttonId) {
                layui.layer.msg('没有可删除的按钮');
                return;
            }
            del_button(buttonId);
            buttonId = null;
            layui.layer.msg('按钮删除成功');
        }
        
        // DIV组件变量
        let divId = null;
        let divButtonId = null;
        
        function createDemoDiv() {
            if (divId) {
                layui.layer.msg('请先删除当前DIV');
                return;
            }
            divId = add_div(200, 200, 300, 300, false, 'border:1px solid #ccc;background:#f5f5f5;', '', custom_callback);
            layui.layer.msg('DIV创建成功');
        }
        
        function createButtonInDiv() {
            if (!divId) {
                layui.layer.msg('请先创建DIV');
                return;
            }
            if (divButtonId) {
                layui.layer.msg('请先删除DIV内的按钮');
                return;
            }
            
            divButtonId = add_button(20, 20, 120, 40, 'DIV内按钮', false, 'div-btn', '', custom_callback, divId);
            layui.layer.msg('DIV内按钮创建成功');
        }
        
        function toggleDivVisibility() {
            if (!divId) {
                layui.layer.msg('请先创建DIV');
                return;
            }
            const div = document.getElementById(divId);
            const isHidden = div.style.display === 'none';
            div.style.display = isHidden ? 'block' : 'none';
            layui.layer.msg(isHidden ? 'DIV已显示' : 'DIV已隐藏');
        }
        
        function deleteDemoDiv() {
            if (!divId) {
                layui.layer.msg('没有可删除的DIV');
                return;
            }
            del_div(divId);
            divId = null;
            divButtonId = null;
            layui.layer.msg('DIV删除成功');
        }
        
        // 卡片面板变量
        let tdivId = null;
        let tdivButtonId = null;
        
        function createDemoTDiv() {
            if (tdivId) {
                layui.layer.msg('请先删除当前卡片面板');
                return;
            }
            tdivId = add_tdiv(200, 200, 300, 300, '示例卡片面板', false, 'border:1px solid #ccc;background:#f5f5f5;', '', custom_callback);
            layui.layer.msg('卡片面板创建成功');
        }
        
        function createButtonInTDiv() {
            if (!tdivId) {
                layui.layer.msg('请先创建卡片面板');
                return;
            }
            if (tdivButtonId) {
                layui.layer.msg('请先删除卡片面板内的按钮');
                return;
            }
            tdivButtonId = add_button(20, 20, 120, 40, '卡片面板内按钮', false, 'div-btn', '', custom_callback, tdivId);
            layui.layer.msg('卡片面板内按钮创建成功');
        }
        
        function deleteDemoTDiv() {
            if (!tdivId) {
                layui.layer.msg('没有可删除的卡片面板');
                return;
            }
            del_tdiv(tdivId);
            tdivId = null;
            tdivButtonId = null;
            layui.layer.msg('卡片面板删除成功');
        }
        
        // 表格组件变量
        let tableId = null;
        
        function createDemoTable() {
            if (tableId) {
                layui.layer.msg('请先删除当前表格');
                return;
            }
            const headers = [
                {name: '姓名', width: 100, sortable: true},
                {name: '年龄', width: 80, sortable: true},
                {name: '职业', width: 150, sortable: false},
                {name: '操作', width: 120, sortable: false}
            ];
            const buttons = [
                {
                    title:'添加行',
                    rgb:'#3399FF',
                    callback:custom_callback
                },
                {
                    title: '清空表格',
                    rgb:'#9999FF',
                    callback:custom_callback
                }
            ];
            //add_table(x, y, w, h, headers, rows, buttons, is_sortable, is_resizable, id, callback)
            tableId = add_table(400, 100, 600, 300, headers, 10, buttons, false, false, 'demo-table', custom_callback);
            layui.layer.msg('表格创建成功');
        }
        
        function addTableRow() {
            if (!tableId) {
                layui.layer.msg('请先创建表格');
                return;
            }
            const names = ['张三', '李四', '王五', '赵六'];
            const jobs = ['工程师', '设计师', '产品经理', '测试'];
            const randomName = names[Math.floor(Math.random() * names.length)];
            const randomAge = Math.floor(Math.random() * 30) + 20;
            const randomJob = jobs[Math.floor(Math.random() * jobs.length)];
            
            var sy1=add_table_row(tableId, 2);
            if(sy1==-1){
                return;
            }
            console.log("tableID",tableId);
             //set_table_cell(tableId,sy1,0,randomName);
             //set_table_cell(tableId,sy1,1,randomAge);
             //set_table_cell(tableId,sy1,2,randomJob);
             set_table_cell(tableId,sy1,2,jobs,true);

             set_table_id(tableId,false,1000)
            layui.layer.msg('表格行添加成功');
        }
        
        function updateTableCell() {
            if (!tableId) {
                layui.layer.msg('请先创建表格');
                return;
            }
            upd_table_cell(tableId, 0, 0, '更新后的姓名');
            layui.layer.msg('表格单元格更新成功');
        }
        
        function deleteDemoTable() {
            if (!tableId) {
                layui.layer.msg('没有可删除的表格');
                return;
            }
            del_table(tableId);
            tableId = null;
            layui.layer.msg('表格删除成功');
        }
        
        // 图片组件变量
        let picId = null;
        
        function createDemoPic() {
            if (picId) {
                layui.layer.msg('请先删除当前图片');
                return;
            }
            picId = add_pic(100, 100, 200, 200,10,'#FF00FF', 'http://180.76.142.113/pic/1.jpg', false, 'demo-pic', custom_callback,'');
            layui.layer.msg('图片创建成功');
        }
        
        function updateDemoPic() {
            if (!picId) {
                layui.layer.msg('请先创建图片');
                return;
            }
            upd_pic(picId, 150, 150, 250, 250, 'http://180.76.142.113/pic/2.jpg', false, 'updated-pic');
            layui.layer.msg('图片更新成功');
        }
        
        function deleteDemoPic() {
            if (!picId) {
                layui.layer.msg('没有可删除的图片');
                return;
            }
            del_pic(picId);
            picId = null;
            layui.layer.msg('图片删除成功');
        }
        
        // 文本组件变量
        let textId = null;
        
        function createDemoText() {
            if (textId) {
                layui.layer.msg('请先删除当前文本');
                return;
            }
            textId = add_text(100, 100, 200, 50, '#000000', false, 0, '示例文本', false, 'demo-text', custom_callback, '');
            layui.layer.msg('文本创建成功');
        }
        
        function updateDemoText() {
            if (!textId) {
                layui.layer.msg('请先创建文本');
                return;
            }
            upd_text(textId, 150, 150, 250, 60, '更新后的文本', false, 'updated-text');
            layui.layer.msg('文本更新成功');
        }
        
        function deleteDemoText() {
            if (!textId) {
                layui.layer.msg('没有可删除的文本');
                return;
            }
            del_text(textId);
            textId = null;
            layui.layer.msg('文本删除成功');
        }
        
        // 轮播图片组件变量
        let picplayId = null;
        
        function createDemoPicplay() {
            if (picplayId) {
                layui.layer.msg('请先删除当前轮播图片');
                return;
            }
            const images = [
                {pic:'http://180.76.142.113/pic/3.jpg', title:'图片1', link:'http://www.baidu.com'},
                {pic:'http://180.76.142.113/pic/4.jpg', title:'图片2', link:''},
                {pic:'http://180.76.142.113/pic/5.jpg', title:'', link:''}
            ];
                                    //x, y,     w, h,   images, autoPlay, animationType, arrowState, indicatorMode, hide,        tag,      css, callback,     divid
            picplayId = add_picplay(100, 100, 300, 200, images,     3,          1,             1,         1,        false, 'demo-picplay', '', custom_callback, '');
            layui.layer.msg('轮播图片创建成功');
        }
        
        function updateDemoPicplay() {
            if (!picplayId) {
                layui.layer.msg('请先创建轮播图片');
                return;
            }
            const newImages = [
                'http://180.76.142.113/pic/6.jpg',
                'http://180.76.142.113/pic/7.jpg',
                'http://180.76.142.113/pic/1.jpg'
            ];
            upd_picplay(picplayId, 150, 150, 350, 250, newImages, 2000, false, 'updated-picplay');
            layui.layer.msg('轮播图片更新成功');
        }
        
        function deleteDemoPicplay() {
            if (!picplayId) {
                layui.layer.msg('没有可删除的轮播图片');
                return;
            }
            del_picplay(picplayId);
            picplayId = null;
            layui.layer.msg('轮播图片删除成功');
        }
    </script>
</body>
</html>